<template>
  <a-modal
    :title='title'
    :width='1100'
    :visible='visible'
    :centered='true'
    :confirmLoading='confirmLoading'
    :maskClosable='false'
    @ok='handleSubmit'
    @cancel='handleCancel'
  >
    <a-spin :spinning='confirmLoading'>
      <a-form :form='form'>
        <a-form-item label='服务名称' :labelCol='labelCol' :wrapperCol='wrapperCol'>
          <a-input
            placeholder='请输入服务名称'
            v-decorator="['service_name', { rules: [{ required: true, message: '请输入服务名称' }] }]"
          />
        </a-form-item>
        <a-form-item label='年度记账凭证账本费用' :labelCol='labelCol' :wrapperCol='wrapperCol'>
          <a-input
            placeholder='请输入年度记账凭证账本费用'
            v-decorator="['ledger_expenses', { rules: [{ required: true, message: '请输入年度记账凭证账本费用' }] }]"
          />
        </a-form-item>
        <a-form-item label='备注说明' :labelCol='labelCol' :wrapperCol='wrapperCol'>
          <a-textarea
            :maxLength='500'
            v-decorator="['remark', { rules: [{ message: '请输入备注说明' }] }]"
            placeholder='请输入备注说明'
            :auto-size='{ minRows: 5, maxRows: 8 }'
          />
        </a-form-item>

        <a-divider orientation='left'>
          个体户
        </a-divider>
        <a-row>
          <a-col :span='12'>
            <a-form-item label='会计提成方式' :labelCol='labelCol' :wrapperCol='HwrapperCol'>
              <a-radio-group
                v-decorator="['gth_commission_account_type', {initialValue:0, rules: [{ required: true, message: '请选择会计提成方式' }]}]"
                button-style='solid'
              >
                <a-radio-button :value='0'>
                  收款金额*()%
                </a-radio-button>
                <a-radio-button :value='1'>
                  固定金额
                </a-radio-button>
                <a-radio-button :value='2'>
                  每月提成
                </a-radio-button>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col :span='12'>
            <a-form-item label='会计提成设置' :labelCol='labelCol' :wrapperCol='HwrapperCol'>
              <a-input
                v-if='form.getFieldValue(&quot;gth_commission_account_type&quot;)==1 || form.getFieldValue(&quot;gth_commission_account_type&quot;)==2'
                v-decorator="['gth_commission_account', { rules: [{ required: true, message: '请输入会计提成' }] }]"
                placeholder='请输入会计提成'
                suffix='元'
              />
              <a-input
                v-else
                v-decorator="['gth_commission_account', { rules: [{ required: true, message: '请输入0~100之间的比例' }] }]"
                placeholder='请输入0~100之间的比例'
                suffix='%'
              />
            </a-form-item>
          </a-col>
          <a-col :span='12'>
            <a-form-item label='外勤提成方式' :labelCol='labelCol' :wrapperCol='HwrapperCol'>
              <a-radio-group
                v-decorator="['gth_commission_outworker_type', {initialValue:0, rules: [{ required: true, message: '请选择外勤提成方式' }]}]"
                button-style='solid'
              >
                <a-radio-button :value='0'>
                  收款金额*()%
                </a-radio-button>
                <a-radio-button :value='1'>
                  固定金额
                </a-radio-button>
                <a-radio-button :value='2'>
                  每月提成
                </a-radio-button>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col :span='12'>
            <a-form-item label='外勤提成设置' :labelCol='labelCol' :wrapperCol='HwrapperCol'>
              <a-input
                v-if='form.getFieldValue(&quot;gth_commission_outworker_type&quot;)==1 || form.getFieldValue(&quot;gth_commission_outworker_type&quot;)==2'
                v-decorator="['gth_commission_outworker', { rules: [{ required: true, message: '请输入外勤提成' }] }]"
                placeholder='请输入外勤提成'
                suffix='元'
              />
              <a-input
                v-else
                v-decorator="['gth_commission_outworker', { rules: [{ required: true, message: '请输入0~100之间的比例' }] }]"
                placeholder='请输入0~100之间的比例'
                suffix='%'
              />
            </a-form-item>
          </a-col>
          <a-col :span='12'>
            <a-form-item label='销售提成方式' :labelCol='labelCol' :wrapperCol='HwrapperCol'>
              <a-radio-group
                v-decorator="['gth_commission_sales_type', {initialValue:0, rules: [{ required: true, message: '请选择销售提成方式' }]}]"
                button-style='solid'
              >
                <a-radio-button :value='0'>
                  (成交价格-成本价格)*()%
                </a-radio-button>
                <a-radio-button :value='1'>
                  固定金额
                </a-radio-button>
                <a-radio-button :value='2'>
                  每月提成
                </a-radio-button>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col :span='12'>
            <a-form-item label='销售提成设置' :labelCol='labelCol' :wrapperCol='HwrapperCol'>
              <a-input
                v-if='form.getFieldValue(&quot;gth_commission_sales_type&quot;)==1 || form.getFieldValue(&quot;gth_commission_sales_type&quot;)==2'
                v-decorator="['gth_commission_sales', { rules: [{ required: true, message: '请输入销售提成' }] }]"
                placeholder='请输入销售提成'
                suffix='元'
              />
              <a-input
                v-else
                v-decorator="['gth_commission_sales', { rules: [{ required: true, message: '请输入0~100之间的比例' }] }]"
                placeholder='请输入0~100之间的比例'
                suffix='%'
              />
            </a-form-item>
          </a-col>
          <a-col :span='12'>
            <a-form-item label='成本价格计算方式' :labelCol='labelCol' :wrapperCol='HwrapperCol'>
              <a-radio-group
                v-decorator="['gth_cost_type', {initialValue:0, rules: [{ required: true, message: '请选择成本价格计算方式' }]}]"
                button-style='solid'
              >
                <a-radio-button :value='0'>
                  收款金额*()%
                </a-radio-button>
                <a-radio-button :value='1'>
                  固定金额
                </a-radio-button>
                <!--                <a-radio-button :value='2'>-->
                <!--                  选择成本费用-->
                <!--                </a-radio-button>-->
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col :span='12'>
            <a-form-item label='成本价格设置' :labelCol='labelCol' :wrapperCol='HwrapperCol'>
              <a-input
                v-if='form.getFieldValue(&quot;gth_cost_type&quot;)==1'
                v-decorator="['gth_cost_value', { rules: [{ required: true, message: '请输入成本价格' }] }]"
                placeholder='请输入成本价格'
                suffix='元'
              />
              <!--              <a-select-->
              <!--                mode="multiple"-->
              <!--                v-decorator="['gth_cost_value', {initialValue:[], rules: [{ required: true, message: '请选择成本价格计算方式' }]}]"-->
              <!--                v-else-if='form.getFieldValue("gth_cost_type")==2'-->
              <!--              >-->
              <!--                <a-select-option value='jack'>-->
              <!--                  成本1-->
              <!--                </a-select-option>-->
              <!--                <a-select-option value='lucy'>-->
              <!--                  成本2-->
              <!--                </a-select-option>-->
              <!--              </a-select>-->
              <a-input
                v-else
                v-decorator="['gth_cost_value', { rules: [{ required: true, message: '请输入0~100之间的比例' }] }]"
                placeholder='请输入0~100之间的比例'
                suffix='%'
              />
            </a-form-item>
          </a-col>
          <a-col :span='12'>
            <a-form-item label='标准价格' :labelCol='labelCol' :wrapperCol='HwrapperCol'>
              <a-input
                v-decorator="['gth_standard_price', { rules: [{ required: true, message: '请输入标准价格' }] }]"
                placeholder='请输入标准价格'
                suffix='元'
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-divider orientation='left'>
          小规模纳税人
        </a-divider>
        <a-row>
          <a-col :span='12'>
            <a-form-item label='会计提成方式' :labelCol='labelCol' :wrapperCol='HwrapperCol'>
              <a-radio-group
                v-decorator="['xgmnsr_commission_account_type', {initialValue:0, rules: [{ required: true, message: '请选择会计提成方式' }]}]"
                button-style='solid'
              >
                <a-radio-button :value='0'>
                  收款金额*()%
                </a-radio-button>
                <a-radio-button :value='1'>
                  固定金额
                </a-radio-button>
                <a-radio-button :value='2'>
                  每月提成
                </a-radio-button>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col :span='12'>
            <a-form-item label='会计提成设置' :labelCol='labelCol' :wrapperCol='HwrapperCol'>
              <a-input
                v-if='form.getFieldValue(&quot;xgmnsr_commission_account_type&quot;)==1 || form.getFieldValue(&quot;xgmnsr_commission_account_type&quot;)==2'
                v-decorator="['xgmnsr_commission_account', { rules: [{ required: true, message: '请输入会计提成' }] }]"
                placeholder='请输入会计提成'
                suffix='元'
              />
              <a-input
                v-else
                v-decorator="['xgmnsr_commission_account', { rules: [{ required: true, message: '请输入0~100之间的比例' }] }]"
                placeholder='请输入0~100之间的比例'
                suffix='%'
              />
            </a-form-item>
          </a-col>
          <a-col :span='12'>
            <a-form-item label='外勤提成方式' :labelCol='labelCol' :wrapperCol='HwrapperCol'>
              <a-radio-group
                v-decorator="['xgmnsr_commission_outworker_type', {initialValue:0, rules: [{ required: true, message: '请选择外勤提成方式' }]}]"
                button-style='solid'
              >
                <a-radio-button :value='0'>
                  收款金额*()%
                </a-radio-button>
                <a-radio-button :value='1'>
                  固定金额
                </a-radio-button>
                <a-radio-button :value='2'>
                  每月提成
                </a-radio-button>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col :span='12'>
            <a-form-item label='外勤提成设置' :labelCol='labelCol' :wrapperCol='HwrapperCol'>
              <a-input
                v-if='form.getFieldValue(&quot;xgmnsr_commission_outworker_type&quot;)==1 || form.getFieldValue(&quot;xgmnsr_commission_outworker_type&quot;)==2'
                v-decorator="['xgmnsr_commission_outworker', { rules: [{ required: true, message: '请输入外勤提成' }] }]"
                placeholder='请输入外勤提成'
                suffix='元'
              />
              <a-input
                v-else
                v-decorator="['xgmnsr_commission_outworker', { rules: [{ required: true, message: '请输入0~100之间的比例' }] }]"
                placeholder='请输入0~100之间的比例'
                suffix='%'
              />
            </a-form-item>
          </a-col>
          <a-col :span='12'>
            <a-form-item label='销售提成方式' :labelCol='labelCol' :wrapperCol='HwrapperCol'>
              <a-radio-group
                v-decorator="['xgmnsr_commission_sales_type', {initialValue:0, rules: [{ required: true, message: '请选择销售提成方式' }]}]"
                button-style='solid'
              >
                <a-radio-button :value='0'>
                  (成交价格-成本价格)*()%
                </a-radio-button>
                <a-radio-button :value='1'>
                  固定金额
                </a-radio-button>
                <a-radio-button :value='2'>
                  每月提成
                </a-radio-button>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col :span='12'>
            <a-form-item label='销售提成设置' :labelCol='labelCol' :wrapperCol='HwrapperCol'>
              <a-input
                v-if='form.getFieldValue(&quot;xgmnsr_commission_sales_type&quot;)==1 || form.getFieldValue(&quot;xgmnsr_commission_sales_type&quot;)==2'
                v-decorator="['xgmnsr_commission_sales', { rules: [{ required: true, message: '请输入销售提成' }] }]"
                placeholder='请输入销售提成'
                suffix='元'
              />
              <a-input
                v-else
                v-decorator="['xgmnsr_commission_sales', { rules: [{ required: true, message: '请输入0~100之间的比例' }] }]"
                placeholder='请输入0~100之间的比例'
                suffix='%'
              />
            </a-form-item>
          </a-col>
          <a-col :span='12'>
            <a-form-item label='成本价格计算方式' :labelCol='labelCol' :wrapperCol='HwrapperCol'>
              <a-radio-group
                v-decorator="['xgmnsr_cost_type', {initialValue:0, rules: [{ required: true, message: '请选择成本价格计算方式' }]}]"
                button-style='solid'
              >
                <a-radio-button :value='0'>
                  收款金额*()%
                </a-radio-button>
                <a-radio-button :value='1'>
                  固定金额
                </a-radio-button>
                <!--                <a-radio-button :value='2'>-->
                <!--                  选择成本费用-->
                <!--                </a-radio-button>-->
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col :span='12'>
            <a-form-item label='成本价格设置' :labelCol='labelCol' :wrapperCol='HwrapperCol'>
              <a-input
                v-if='form.getFieldValue(&quot;xgmnsr_cost_type&quot;)==1'
                v-decorator="['xgmnsr_cost_value', { rules: [{ required: true, message: '请输入成本价格' }] }]"
                placeholder='请输入成本价格'
                suffix='元'
              />
              <!--              <a-select-->
              <!--                mode="multiple"-->
              <!--                v-decorator="['xgmnsr_cost_value', {initialValue:[], rules: [{ required: true, message: '请选择成本价格计算方式' }]}]"-->
              <!--                v-else-if='form.getFieldValue("xgmnsr_cost_type")==2'-->
              <!--              >-->
              <!--                <a-select-option value='jack'>-->
              <!--                  成本1-->
              <!--                </a-select-option>-->
              <!--                <a-select-option value='lucy'>-->
              <!--                  成本2-->
              <!--                </a-select-option>-->
              <!--              </a-select>-->
              <a-input
                v-else
                v-decorator="['xgmnsr_cost_value', { rules: [{ required: true, message: '请输入0~100之间的比例' }] }]"
                placeholder='请输入0~100之间的比例'
                suffix='%'
              />
            </a-form-item>
          </a-col>
          <a-col :span='12'>
            <a-form-item label='标准价格' :labelCol='labelCol' :wrapperCol='HwrapperCol'>
              <a-input
                v-decorator="['xgmnsr_standard_price', { rules: [{ required: true, message: '请输入标准价格' }] }]"
                placeholder='请输入标准价格'
                suffix='元'
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-divider orientation='left'>
          一般纳税人
        </a-divider>
        <a-row>
          <a-col :span='12'>
            <a-form-item label='会计提成方式' :labelCol='labelCol' :wrapperCol='HwrapperCol'>
              <a-radio-group
                v-decorator="['ybnsr_commission_account_type', {initialValue:0, rules: [{ required: true, message: '请选择会计提成方式' }]}]"
                button-style='solid'
              >
                <a-radio-button :value='0'>
                  收款金额*()%
                </a-radio-button>
                <a-radio-button :value='1'>
                  固定金额
                </a-radio-button>
                <a-radio-button :value='2'>
                  每月提成
                </a-radio-button>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col :span='12'>
            <a-form-item label='会计提成设置' :labelCol='labelCol' :wrapperCol='HwrapperCol'>
              <a-input
                v-if='form.getFieldValue(&quot;ybnsr_commission_account_type&quot;)==1 || form.getFieldValue(&quot;ybnsr_commission_account_type&quot;)==2'
                v-decorator="['ybnsr_commission_account', { rules: [{ required: true, message: '请输入会计提成' }] }]"
                placeholder='请输入会计提成'
                suffix='元'
              />
              <a-input
                v-else
                v-decorator="['ybnsr_commission_account', { rules: [{ required: true, message: '请输入0~100之间的比例' }] }]"
                placeholder='请输入0~100之间的比例'
                suffix='%'
              />
            </a-form-item>
          </a-col>
          <a-col :span='12'>
            <a-form-item label='外勤提成方式' :labelCol='labelCol' :wrapperCol='HwrapperCol'>
              <a-radio-group
                v-decorator="['ybnsr_commission_outworker_type', {initialValue:0, rules: [{ required: true, message: '请选择外勤提成方式' }]}]"
                button-style='solid'
              >
                <a-radio-button :value='0'>
                  收款金额*()%
                </a-radio-button>
                <a-radio-button :value='1'>
                  固定金额
                </a-radio-button>
                <a-radio-button :value='2'>
                  每月提成
                </a-radio-button>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col :span='12'>
            <a-form-item label='外勤提成设置' :labelCol='labelCol' :wrapperCol='HwrapperCol'>
              <a-input
                v-if='form.getFieldValue(&quot;ybnsr_commission_outworker_type&quot;)==1 || form.getFieldValue(&quot;ybnsr_commission_outworker_type&quot;)==2'
                v-decorator="['ybnsr_commission_outworker', { rules: [{ required: true, message: '请输入外勤提成' }] }]"
                placeholder='请输入外勤提成'
                suffix='元'
              />
              <a-input
                v-else
                v-decorator="['ybnsr_commission_outworker', { rules: [{ required: true, message: '请输入0~100之间的比例' }] }]"
                placeholder='请输入0~100之间的比例'
                suffix='%'
              />
            </a-form-item>
          </a-col>
          <a-col :span='12'>
            <a-form-item label='销售提成方式' :labelCol='labelCol' :wrapperCol='HwrapperCol'>
              <a-radio-group
                v-decorator="['ybnsr_commission_sales_type', {initialValue:0, rules: [{ required: true, message: '请选择销售提成方式' }]}]"
                button-style='solid'
              >
                <a-radio-button :value='0'>
                  (成交价格-成本价格)*()%
                </a-radio-button>
                <a-radio-button :value='1'>
                  固定金额
                </a-radio-button>
                <a-radio-button :value='2'>
                  每月提成
                </a-radio-button>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col :span='12'>
            <a-form-item label='销售提成设置' :labelCol='labelCol' :wrapperCol='HwrapperCol'>
              <a-input
                v-if='form.getFieldValue(&quot;ybnsr_commission_sales_type&quot;)==1 || form.getFieldValue(&quot;ybnsr_commission_sales_type&quot;)==2'
                v-decorator="['ybnsr_commission_sales', { rules: [{ required: true, message: '请输入销售提成' }] }]"
                placeholder='请输入销售提成'
                suffix='元'
              />
              <a-input
                v-else
                v-decorator="['ybnsr_commission_sales', { rules: [{ required: true, message: '请输入0~100之间的比例' }] }]"
                placeholder='请输入0~100之间的比例'
                suffix='%'
              />
            </a-form-item>
          </a-col>
          <a-col :span='12'>
            <a-form-item label='成本价格计算方式' :labelCol='labelCol' :wrapperCol='HwrapperCol'>
              <a-radio-group
                v-decorator="['ybnsr_cost_type', {initialValue:0, rules: [{ required: true, message: '请选择成本价格计算方式' }]}]"
                button-style='solid'
              >
                <a-radio-button :value='0'>
                  收款金额*()%
                </a-radio-button>
                <a-radio-button :value='1'>
                  固定金额
                </a-radio-button>
                <!--                <a-radio-button :value='2'>-->
                <!--                  选择成本费用-->
                <!--                </a-radio-button>-->
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col :span='12'>
            <a-form-item label='成本价格设置' :labelCol='labelCol' :wrapperCol='HwrapperCol'>
              <a-input
                v-if='form.getFieldValue(&quot;ybnsr_cost_type&quot;)==1'
                v-decorator="['ybnsr_cost_value', { rules: [{ required: true, message: '请输入成本价格' }] }]"
                placeholder='请输入成本价格'
                suffix='元'
              />
              <!--              <a-select-->
              <!--                mode="multiple"-->
              <!--                v-decorator="['ybnsr_cost_value', {initialValue:[], rules: [{ required: true, message: '请选择成本价格计算方式' }]}]"-->
              <!--                v-else-if='form.getFieldValue("ybnsr_cost_type")==2'-->
              <!--              >-->
              <!--                <a-select-option value='jack'>-->
              <!--                  成本1-->
              <!--                </a-select-option>-->
              <!--                <a-select-option value='lucy'>-->
              <!--                  成本2-->
              <!--                </a-select-option>-->
              <!--              </a-select>-->
              <a-input
                v-else
                v-decorator="['ybnsr_cost_value', { rules: [{ required: true, message: '请输入0~100之间的比例' }] }]"
                placeholder='请输入0~100之间的比例'
                suffix='%'
              />
            </a-form-item>
          </a-col>
          <a-col :span='12'>
            <a-form-item label='标准价格' :labelCol='labelCol' :wrapperCol='HwrapperCol'>
              <a-input
                v-decorator="['ybnsr_standard_price', { rules: [{ required: true, message: '请输入标准价格' }] }]"
                placeholder='请输入标准价格'
                suffix='元'
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import _ from 'lodash'
import * as Api from '@/api/service'

export default {
  data() {
    return {
      // 对话框标题
      title: '',
      // 标签布局属性
      labelCol: {
        span: 7
      },
      // 输入框布局属性
      wrapperCol: {
        span: 13
      },
      HwrapperCol: {
        span: 17
      },
      // modal(对话框)是否可见
      visible: false,
      // modal(对话框)确定按钮 loading
      confirmLoading: false,
      // 当前表单元素
      form: this.$form.createForm(this),
      // 当前记录
      record: {},
      // 当前模式
      mode: ''
    }
  },
  methods: {

    // 显示对话框
    add() {
      this.mode = 'add'
      this.title = '新增服务内容'
      this.visible = true
    },
    edit(record) {
      this.mode = 'edit'
      this.title = '编辑服务内容'
      this.visible = true
      this.record = record
      this.setFieldsValue()
    },
    // 设置默认值
    setFieldsValue() {
      const { form: { setFieldsValue } } = this
      this.$nextTick(() => {
        console.log(Object.keys(this.record))
        const data = _.pick(this.record, Object.keys(this.record))
        setFieldsValue(data)
      })
    },

    // 确认按钮
    handleSubmit(e) {
      e.preventDefault()
      const { form: { validateFields } } = this
      // 表单验证
      validateFields((errors, values) => {
        // 提交到后端api
        !errors && this.onFormSubmit(values)
      })
    },

    // 关闭对话框事件
    handleCancel() {
      this.visible = false
      this.form.resetFields()
    },

    // 提交到后端api
    onFormSubmit(values) {
      this.confirmLoading = true
      var api
      if (this.mode === 'add') {
        api = Api.add({ form: values })
      } else {
        api = Api.edit({ apiId: this.record['service_id'], form: values })
      }
      api.then(result => {
        // 显示成功
        this.$message.success(result.message, 1.5)
        // 关闭对话框
        this.handleCancel()
        // 通知父端组件提交完成了
        this.$emit('handleSubmit', values)
      })
        .finally(result => {
          this.confirmLoading = false
        })
    }

  }
}
</script>
